<template>
  <view class="student-cards-container">
    <!-- 个人信息卡片 -->
    <view class="info-card card" @click="navigateTo('info')">
      <view class="card-content">
        <uni-icons type="contact" size="30" color="#fff"></uni-icons>
        <text class="card-title">个人信息</text>
        <text class="card-desc">查看完整档案</text>
      </view>
      <uni-icons type="arrowright" size="20" color="#fff"></uni-icons>
    </view>
    
    <!-- 成绩卡片 -->
    <view class="score-card card" @click="navigateTo('score')">
      <view class="card-content">
        <uni-icons type="medal" size="30" color="#fff"></uni-icons>
        <text class="card-title">学业成绩</text>
        <text class="card-desc">各科成绩分析</text>
      
      </view>
      <uni-icons type="arrowright" size="20" color="#fff"></uni-icons>
      <!-- <view class="new-badge" v-if="hasNewScores">新</view> -->
    </view>
    
    <!-- 表扬卡片 -->
    <view class="praise-card card" @click="navigateTo('praise')">
      <view class="card-content">
        <uni-icons type="star-filled" size="30" color="#fff"></uni-icons>
        <text class="card-title">表扬记录</text>
        <text class="card-desc">查看表扬记录</text>
      </view>
      <uni-icons type="arrowright" size="20" color="#fff"></uni-icons>
      <!-- <view class="sparkle"></view> -->
    </view>
    
    <!-- 作业卡片 -->
    <view class="homework-card card" @click="navigateTo('homework')">
      <view class="card-content">
        <uni-icons type="compose" size="30" color="#fff"></uni-icons>
        <text class="card-title">作业情况</text>
        <text class="card-desc">查看作业情况</text>
      </view>
      <uni-icons type="arrowright" size="20" color="#fff"></uni-icons>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      hasNewScores: true,
      praiseCount: 5,
      completedHomework: 12,
      totalHomework: 15,
      avgScore: 88
    }
  },
  computed: {
    homeworkProgress() {
      return Math.round((this.completedHomework / this.totalHomework) * 100)
    }
  },
  methods: {
    navigateTo(page) {
      uni.navigateTo({
        url: `/pages/student/${page}`
      })
    }
  }
}
</script>

<style lang="scss">
.student-cards-container {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  
  .card {
    height: 180rpx;
    border-radius: 16rpx;
    padding: 30rpx 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    
    &:active {
      transform: scale(0.98);
      opacity: 0.9;
    }
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, var(--start-color), var(--end-color));
      opacity: 0.9;
      z-index: 0;
    }
    
    .card-content {
      flex: 1;
      z-index: 1;
      
      .card-title {
        display: block;
        font-size: 34rpx;
        font-weight: bold;
        color: #fff;
        margin: 10rpx 0 6rpx;
      }
      
      .card-desc {
        font-size: 26rpx;
        color: rgba(255, 255, 255, 0.8);
      }
      
      .progress-container {
        margin-top: 15rpx;
        
        .progress-text {
          font-size: 24rpx;
          color: rgba(255, 255, 255, 0.8);
          margin-bottom: 8rpx;
          display: block;
        }
      }
    }
    
    .new-badge {
      position: absolute;
      top: 15rpx;
      right: 15rpx;
      background: #fff;
      color: var(--end-color);
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      font-weight: bold;
      z-index: 2;
      animation: pulse 1.5s infinite;
    }
    
    .sparkle {
      position: absolute;
      right: -20rpx;
      top: -20rpx;
      width: 80rpx;
      height: 80rpx;
      background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
      border-radius: 50%;
      z-index: 0;
    }
  }
  
  .info-card {
    --start-color: #4a6cf7;
    --end-color: #2541b2;
  }
  
  .score-card {
    --start-color: #ff6b6b;
    --end-color: #ff4757;
  }
  
  .praise-card {
    --start-color: #ffb347;
    --end-color: #ff8c00;
  }
  
  .homework-card {
    --start-color: #1dd1a1;
    --end-color: #10ac84;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>